<template>
	<view>
		<view class="empty" v-if="goods.length === 0">
			<view class="empty-text">空空如也的购物车</view>
			<view class="empty-button" @click="goshopping">去选购</view>
		</view>
		<view v-else>
			<view class="goods-detail" v-for="(item,index) in goods" :key="index">
				<view class="detail-left">
					<view class="goods-left">
						<checkbox-group @change="selected(item)">
							<label>
								<checkbox class="selected" color="#555555" :checked="item.checked" /><text></text>
							</label>
						</checkbox-group>
						<image :src="item.good.image" style="width: 150rpx;height: 140rpx;"></image>
					</view>
					<view class="size">
						<view class="num">
							<text class="subtract" @tap="reduce(item)">-</text>
							<text class="num">{{item.count}}</text>
							<text @tap="add(item)" class="add">+</text>
						</view>
						<text class="goods-price">￥{{item.good.price}}元/件</text>
					</view>
				</view>
				<view class="namebox">
					<view>{{item.good.name}}</view>
				</view>
				<view class="detail-right">
					<!-- 找一个删除图标放在此处src -->
					<uni-icons type="trash" class="image" size="40rpx"
						@tap="deleteGoodFromCart(item.good.id)"></uni-icons>
				</view>
			</view>
		</view>
		<view class="end">
			<view class="end-left">
				<checkbox-group @change="selectgoods()">
					<label>
						<checkbox :checked="allchecked" />全选
					</label>
				</checkbox-group>
				<view>
					总计：<text style="color: #f00;font-weight: bold;">￥{{totalPrice()}}元</text>
				</view>
			</view>
			<view class="end-right" @tap="buy()">
				结算({{totalCount()}})
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref,
		watch,
		onBeforeMount
	} from 'vue'
	const goods = ref([])
	const allchecked = ref(false)

	function goshopping() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	function selected(item) {
		item.checked = !item.checked
		if (!item.checked) {
			allchecked.value = false
		} else {
			const a = goods.value.forEach((item) => {
				return item.checked === true
			})
			if (a) {
				allchecked.value = true
			} else {
				allchecked.value = false
			}
		}
	}

	function selectgoods() {
		allchecked.value = !allchecked.value
		if (allchecked.value) {
			goods.value.map(item => {
				item.checked = true
			})
		} else {
			goods.value.map(item => {
				item.checked = false
			})
		}
	}

	function totalPrice() {
		let sum = 0
		for (let i = 0; i < goods.value.length; i++) {
			if (goods.value[i].checked) {
				sum += (goods.value[i].good.price * goods.value[i].count)
			}
		}
		return sum.toFixed(2)
	}

	function totalCount() {
		let sum = 0
		for (let i = 0; i < goods.value.length; i++) {
			if (goods.value[i].checked) {
				sum += goods.value[i].count
			}
		}
		return sum
	}

	async function reduce(item) {
		if (item.count == 1) {
			uni.showToast({
				title: '不能更少了',
				icon: 'error'
			});
			return
		}
		const count = --item.count
		const gid = item.good.id
		await uni.$put('/cart/update', {
			gid,
			count
		})
	}

	async function add(item) {
		const count = ++item.count
		const gid = item.good.id
		await uni.$put('/cart/update', {
			gid,
			count
		})
	}

	async function buy() {
		let flag = false
		let Count = totalCount()
		let Price = totalPrice()
		for (let i = 0; i < goods.value.length; i++) {
			if (goods.value[i].checked) {
				await uni.$delete('/cart/delete', {
					gid: goods.value[i].good.id
				})
				flag = true
			}
		}
		if (flag) {
			await getGoodsByCart()
			uni.showToast({
				title: `结算了${Count}个，共${Price}元`
			})
			return
		}
		uni.showToast({
			title: '请选择商品',
			icon: 'error'
		})

	}
	async function getGoodsByCart() {
		const data = await uni.$get('/cart/getGood', {
			page: 1,
			row: 20
		})
		if (data.code !== 200) {
			goods.value = []
			return
		}
		goods.value = data.data
		goods.value.map((item) => {
			item['checked'] = false
		})
		console.log(goods.value);
	}

	const CD = ref(false)
	async function deleteGoodFromCart(gid) {
		if (CD.value) {
			return
		}
		CD.value = true
		setTimeout(() => {
			CD.value = false
		}, 200)
		const user = uni.getStorageSync("user")
		const res = await uni.$delete('/cart/delete', {
			gid
		})
		uni.showToast({
			title: res.msg,
			icon: res.code === 200 ? 'success' : 'error'
		});
		await getGoodsByCart()
	}

	onShow(async () => {
		await getGoodsByCart()
	})
</script>

<style lang="scss">
	.goods-detail .namebox {
		height: 100%;
		flex: 1 1 auto;
	}


	.goods {
		line-height: 80rpx;
		background-color: #FFFFFF;

		&-detail {
			display: flex;
			padding: 30rpx 15rpx 30rpx 30rpx;
			background-color: #fff;
			justify-content: space-between;
			border-bottom: 5rpx solid #F1F1F1;
			align-items: center;

			.detail-left {
				display: flex;

				.goods-left {
					display: flex;
					align-items: center;
				}
			}

			.size {
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				margin-left: 30rpx;

				.num {
					margin-top: -30rpx;

					text {
						width: 50rpx;
						line-height: 50rpx;
						text-align: center;
						display: inline-block;
						background-color: #F7F7F7;
						margin-top: 40rpx;
						margin-right: 10rpx;
					}

					.add {
						color: #FA4305;
						border-radius: 10rpx 30rpx 30rpx 10rpx;
						margin-right: 20rpx;
					}

					.subtract {
						border-radius: 30rpx 10rpx 10rpx 30rpx;
					}
				}

				.goods-price {
					margin-top: 10rpx;
					font-size: 25rpx;
					color: #F44545;
				}
			}

			.detail-right {
				display: flex;
				justify-content: space-around;
				flex-direction: column;
				margin-right: 10rpx;

				.image {
					margin-top: 10rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.image2 {
					margin-top: 20rpx;
					width: 60rpx;
					height: 60rpx;
				}
			}
		}
	}

	.empty {

		position: relative;
		top: 220rpx;
		text-align: center;
		display: flex;
		align-items: center;
		flex-direction: column;

		&-text {
			color: #808080;
			margin-bottom: 50rpx;
		}

		&-button {
			width: 300rpx;
			height: 90rpx;
			color: orange;
			border: 1rpx solid orange;
			text-align: center;
			line-height: 90rpx;
			border-radius: 48rpx;
		}
	}

	.end {
		width: 100%;
		height: 90rpx;
		background-color: #fff;
		position: fixed;
		bottom: 100rpx;
		left: 0;
		display: flex;
		align-items: center;

		&-left {
			width: 70%;
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;

			.end-flex {
				display: flex;
				align-items: center;
			}
		}

		&-right {
			width: 30%;
			line-height: 90rpx;
			background-color: #F44545;
			text-align: center;
			color: #fff;
		}
	}
</style>